<template>
	<view class="container">
		<!-- 头部 -->
		<uni-row id="row1">

			<uni-col :span="4" class="col1">
				<image id='img' :src="iconImg">
				</image>


			</uni-col>
			<uni-col :span="3" class="col1">
				<text id="home-text">首页</text>
			</uni-col>

			<view v-if="!longinType">
				<uni-col :span="14" class="col1" style="text-align: right;">
					<text id="home-text">登录</text>
				</uni-col>
			</view>
			<!--  -->
			<view v-if="longinType">
				<!-- <uni-col :span="5" class="col1" style="text-align: right;">
					<uni-icons type="notification" color="#fff" size="20"></uni-icons>
				</uni-col> -->
				<uni-col :span="12" class="col1" style="text-align: right;">
					<text id="nickname">用户昵称</text>
				</uni-col>
				<uni-col :span="2" class="col1" style="text-align: right; ">

					<uni-icons type="vip" color="#fff" size="20"></uni-icons>
				</uni-col>
				<uni-col :span="3" class="col1" style="text-align: right; ">
					<image id='head' :src="headImg">
					</image>
				</uni-col>
			</view>

			<!-- 	<navigator url="/pages/search/search" hover-class="navigator-hover">
									<uni-icons type="search" size="25" ></uni-icons>
				</navigator> -->


		</uni-row>

		<!-- 轮播图 -->
		<uni-row id='Rotating'>
			<uni-col :spa="28">
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in info" :key="index">
							
							  <a :href="item.links" target="_blank">
							   <view class="swiper-item" >
								
								<!-- <image  :src="item.content"></image> -->
								<image id='lunimg' :src="item.picture">
								</image>
							</view>
							</a>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</uni-col>
		</uni-row>


		<!-- 选项框 -->
		<uni-row class='Option' v-if="searchType">

			<uni-col :span="18" style="margin-left: 30px;">
				<view>
					<scroll-view class="scroll-view_H" show-scrollbar="true" scroll-x="true" scroll-left="120">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" @click="article(0)">全部</view>
						<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item ,index) in tag" :key="index"
							@click="article(item.id)">{{item.tagName}}</view>

					</scroll-view>
				</view>
			</uni-col>
			<uni-col :span="2" style="margin-top: 5px;margin-left: 25px;">
				<uni-icons type="search" color="#212529" size="25" @click="searchTypeLock"></uni-icons>
			</uni-col>
		</uni-row>
		<uni-row class='Option' style="margin-top: -10px;" v-if="!searchType">
			<uni-col :span="18" style="margin-left: 30px">
				<uni-search-bar radius="5" placeholder="搜你想搜..." bgColor="#fff" clearButton="auto" cancelButton="none"
					@confirm="searchConfirm" />

			</uni-col>
			<uni-col :span="2" style="margin-top: 13px;">
				<uni-icons type="closeempty" color="#212529" size="25" @click="searchTypeLock"></uni-icons>
			</uni-col>
		</uni-row>

		<!-- 文章列表内容 -->
		<uni-row id='content'>
			<view v-for="(item, index) in items" class="content_items" @click="articlexq(item.id)">
				<!-- <uni-list-chat style="background-color: #f5f5f5;" :avatar-circle="true" :title="item.title"
					:avatar="item.img" :note="item.message" :time="item.date"></uni-list-chat> -->
				<uni-row style="margin-top: 10px;">
					<text class="data_title">{{item.title}}</text>
				</uni-row>
				<uni-row>
					<text class="data_message">{{item.content}}</text>
				</uni-row>
				<uni-row>
					<uni-col :span="2">
						<!-- <image id='img' :mode="model"
							 :v-lazy="item.src">
						</image> -->
						
						<!--懒加载>
						<img v-lazy="item.userPhoto" style="width: 32px;height: 32px;">
						<!-- <image style="width: 32px;height: 32px;"  lazy-load="true" :src="item.src" /> -->
					</uni-col>
					<uni-col :span="2" class="col2" style="margin-left: 10px;">
						<uni-icons type="eye" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="2" class="col2">
						{{item.count}}
					</uni-col>
					<uni-col :span="2" class="col2">
						<uni-icons type="chatbubble" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="2" class="col2">
						0
					</uni-col>
					<uni-col :span="2" class="col2">
						<uni-icons type="hand-up" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="2" class="col2">
						{{item.likesNum}}
					</uni-col>
					<uni-col :span="2" class="col2" style="margin-left: 20px;">
						<uni-icons type="map" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="5" class="col2">
						{{item.tagName}}
					</uni-col>
				</uni-row>
				<view style="width: 100%;height: 1px;background-color: #d6dbe3;"></view>
			</view>
			<uni-load-more :status="loadingStatus" @clickLoadMore="loadMore"></uni-load-more>
		</uni-row>
	</view>
</template>


<script>
	// 引入 request 文件
	import request from '@/util/request';
	export default {
		data() {
			return {
				tag: [{
					id: '1',
					tagName: 'php'

				}],

				iconImg: "https://cdn.tobebetterjavaer.com/paicodingui916/static/img/icon.png",
				headImg: "https://cdn.tobebetterjavaer.com/paicoding/avatar/0075.png",
				longinType: true,
				searchType: true,
				src: 'http://localhost:5173/static/c2.png',
				model: 'scaleToFill',
				username: 'name',
				info: [{
						picture: 'http://localhost:5173/static/img/4.jpg'
					},

					// {
					// 	picture: 'http://localhost:5173/static/img/5.jpg'
					// },

					// {
					// 	picture: 'http://localhost:5173/static/img/6.jpg'
					// },

				],
				current: 0,
				mode: 'round',
				loadingStatus: 'more', // 加载更多的状态
				items: [{
						message: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题",
						date: "2022-08-07 22:11",
						src: "http://localhost:5173/static/c1.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题1",
						date: "2023-08-07 22:11",
						src: "http://localhost:5173/static/c2.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题2",
						date: "2024-08-07 22:11",
						src: "http://localhost:5173/static/c3.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题3",
						date: "2025-08-07 22:11",
						src: "http://localhost:5173/static/c4.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src: "http://localhost:5173/static/c5.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题5",
						date: "2025-08-07 22:11",
						src: "http://localhost:5173/static/c6.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src: "http://localhost:5173/static/c7.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src: "http://localhost:5173/static/c8.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src: "http://localhost:5173/static/c9.png"
					},

				]

			}
		},


		//进入页面加载方法
		onShow() {
			console.log("onShow");
			this.advertisement();
			this.tag1();
			this.article(0);
		},


		methods: {
			//跳转文章详情
			articlexq(id){
				console.log(id);
				window.location.href = "/#/pages/article/detail/detail?id=" + id;//文章详情跳转参数为id
				
			},		
			//请求广告列表
			advertisement() {
				//异步发送请求
				// const res = await uni.request({
				// 	url: 'http://localhost:8080/home/advertisement/lselect',
				// 	//data:params  //请求参数
				// })
				const res = request({
					url: '/home/advertisement/lselect',
					method: 'get',
				})
				res.then(res => {
						this.info = res.data;
				}).catch(err => {
					console.log("xxxx");
				})
			},

			//请求标签列表 
			tag1() {
				// //异步发送请求
				// const res = await uni.request({
				// 	url: 'http://localhost:8080/home/tag/select',
				// 	//data:params  //请求参数
				// })
				const res = request({
					url: '/home/tag/select',
					method: 'get',
				});
				res.then(res => {
						this.tag = res.data;
				}).catch(err => {
					console.log("xxxx");
				})
				// if (res.statusCode == 200) {
				// 	console.log(res);
				// 	this.tag = res.data.data;
				// }
			},
			

			//请求首页文章列表
			article(idvalue) {

				const res = request({
					url: '/home/article/select',
					method: 'get',
					data: {
						"id": idvalue
					} //请求参数
				});

				//异步发送请求
				// const res = await uni.request({
				// 	url: 'http://localhost:8080/home/article/select',
				// 	data:{"id":idvalue}  //请求参数
				// })
				res.then(res => {
						this.items = res.data;
				}).catch(err => {
					console.log("xxxx");
				})

				
			},


			//搜索跳转方法 
			searchConfirm(e) {
				console.log(e);
				window.location.href = "/#/pages/search/search?search=" + e.value;
			},
			//轮播值改变
			change(e) {
				console.log(11);
				//console.log(e);
				//	this.current = e.detail.current;
			},
			//搜索栏和取消切换
			searchTypeLock() {
				this.searchType = !this.searchType;
			},
			//加载事件方法
			loadMore() {
				console.log("loadMore");
				if (this.loadingStatus === 'loading') return;
				this.loadingStatus = 'loading';

				// 模拟异步加载数据
				setTimeout(() => {
					this.loadingStatus = 'more';
				}, 1000)
			},
			search() {

			}



		}
	}
</script>

<style>
	.container {
		//padding: 10px;
		background-color: #F5F5F5;
	}

	#row1 {
		height: 60px;
		/* background-color: rgba(36, 41, 47); */
		background-color: #99ccff;
	}

	.col1 {
		margin-top: 20px;
		text-align: center;
		border: 1px soikld red;
	}

	#img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		//left: 20px;
		/* background-color: #eeeeee;
		margin-top: 3px; */
	}

	#lunimg {
		width: 350PX;
		height: 200px;
		margin-left: 12px;
		;
	}

	#home-text {
		color: #fff;
		font-weight: 500;
		font-size: 18px;
		//margin-left: 5px;
	}

	#name {
		margin-left: 2px;
		line-height: 34px;
	}

	#search {
		margin-top: 5px;

	}

	#Rotating {
		margin-top: 5px;
		text-align: center;

	}

	.swiper-box {
		height: 200px;

	}

	.Option {
		margin-top: 10px;
	}

	.text {
		text-align: center;
	}

	#uni-grid {
		width: 300px;
		margin-left: 35px;
		/* padding-left: 20px;
		padding-right: 20px; */
	}

	#content {
		padding-left: 20px;
		padding-right: 20px;
		background-color: #FFFFFF;
	}

	#hot {
		margin: 10px;

	}

	#hot_top_xian {
		background-color: #ff0;
		width: 100%;
		height: 2px;
		margin-top: 5px;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		/* //width: 100%; */
		/* border: 1px solid red; */
		//margin-left: 30px;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 90PX;
		height: 44PX;
		line-height: 35px;
		text-align: left;
		font-size: 18px;
		font-weight: 700;
		color: #212529;
	}

	.data_title {
		font-weight: 500;
		font-size: 18px;
		line-height: 26px;
		color: #212529;
	}

	.data_message {
		font-size: 14px;
		line-height: 22px;
		color: #515767;
		min-height: 44px;
	}

	.col2 {
		margin-top: 5PX;
	}

	#nickname {
		color: #ff6900;
		font-weight: 600;
		font-size: 14px;
	}

	#head {
		width: 36px;
		height: 36px;
		margin-top: -5px;
		border-radius: 50%;
	}
	.content_items{
		border-radius: 5px;
		border: 1px solid #515767!important;
		margin-top: 10px;
		padding-left: 5px;
		box-shadow: 2px 2px 5px #66ccff;
		background-color: #F4F4F4;
	}
</style>